<template>
  <div style="overflow: hidden; position: relative;">
    <c-title :hide="false" text="绿色积分"></c-title>
    <div class="background_box"></div>
    <div style="margin: 3rem  16px 0; border-radius: 1rem; overflow: hidden;">
      <div class="top">
      <div class="item">
        <div class="item-text">积分总数</div>
        <div class="item-point">{{ all_ls_point }}</div>

      </div>
      <div class="item">
        <div class="item-text">可用积分</div>
        <div class="item-point">{{ ls_point_total }}</div>
      </div>
      <div class="item">
        <div class="item-text">已释放积分</div>
        <div class="item-point">{{ ysf_ls_point }}</div>

      </div>
      <div class="item">
        <div class="item-text">未释放积分</div>
        <div class="item-point">{{ wsf_ls_point }}</div>
      </div>
    </div>
    <div class="top">
      <div class="item">
        <div class="item-text">总余额</div>
        <div class="item-point">{{ all_yue_total }}</div>
      </div>
      <div class="item">
        <div class="item-text">可用余额</div>
        <div class="item-point">{{ yue_total }}</div>
      </div>
      <div class="item">
        <div class="item-text">已释放余额</div>
        <div class="item-point">{{ ysf_yue }}</div>

      </div>
      <div class="item">
        <div class="item-text">未释放余额</div>
        <div class="item-point">{{ wsf_yue }}</div>
      </div>
    </div>
    </div>

    <ul class="list_box_b">
      <li @click="gotoPage('greenpointList')">
        <!-- <i class="iconfont icon-balance_k"></i> -->
        积分明细
        <i class="fa fa-angle-right"></i>
      </li>

      <li @click="gotoPage('shifangList')">
        <!-- <i class="iconfont icon-balance_k"></i> -->
        释放明细
        <i class="fa fa-angle-right"></i>
      </li>
      <!-- <li @click="gotoPage('shifangorder')">
        释放订单
        <i class="fa fa-angle-right"></i>
      </li> -->
      <li @click="gotoPage('adsList')">
        <!-- <i class="iconfont icon-balance_k"></i> -->
        广告列表
        <i class="fa fa-angle-right"></i>
      </li>


    </ul>

  </div>
</template>

<script>
// import { scrollMixin } from "utils/mixin";
export default {
  // mixins: [scrollMixin], //加载更多
  data() {
    return {
      new_content: [],
      //加载更多
      isLoadMore: false,
      total_page: 0,
      page: 1,

      all_ls_point: 0,
      ls_point_total: 0,
      ysf_ls_point: 0,
      wsf_ls_point: 0,
      all_yue_total: 0,
      yue_total: 0,
      ysf_yue: 0,
      wsf_yue: 0,
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    gotoPage(url) {
      this.$router.push(this.fun.getUrl(url, {}, {}))
    },
    search() {
      let that = this;
      this.isLoadMore = true;
      this.page = 1;
      this.total_page = 0;
      $http.post('member.member.lsInfo', "", "").then((res) => {
        if (res.result) {
          that.all_ls_point = res.data.all_ls_point
          that.ls_point_total = res.data.ls_point_total
          that.ysf_ls_point = res.data.ysf_ls_point
          that.wsf_ls_point = res.data.wsf_ls_point
          that.all_yue_total = res.data.all_yue_total
          that.yue_total = res.data.yue_total
          that.ysf_yue = res.data.ysf_yue
          that.wsf_yue = res.data.wsf_yue
        }
        // that.
        console.log();
      });
    },
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.background_box {
    color: #382c0a;
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--themeBaseColor)), to(#f5f5f5));
    background-image: -webkit-linear-gradient(var(--themeBaseColor), #f5f5f5);
    background-image: linear-gradient(var(--themeBaseColor), #f5f5f5);
    min-height: 12.125rem;
    padding: 1.5938rem 1.0938rem 0 1.0938rem;
    position: absolute;
    z-index: -1;
    width: 100%;
  }
.top {
  padding: 1rem 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .item-point {
      font-size: 1rem;
      // font-weight: bold;
    }

    .item-text {
      font-size: 0.825rem;
      font-weight: 500;
    }
  }
}

.list_box_b {
  background: #fff;
  padding-left: 0.875rem;
  border-top: solid 0.0625rem #ebebeb;
  border-bottom: solid 0.0625rem #ebebeb;

  li {
    border-bottom: solid 0.0625rem #ebebeb;
    padding-right: 0.875rem;
    display: flex;
    align-items: center;
    line-height: 2.875rem;
    font-size: 16px;
    position: relative;

    .icon-balance_a {
      color: #6cbf6a;
    }

    .icon-balance_b {
      color: #fac337;
    }

    .icon-balance_c {
      color: #069ce7;
    }

    .icon-balance_l {
      color: #ee4343;
    }

    .icon-balance_m {
      color: #418be0;
    }

    .icon-balance_n {
      color: #ff855c;
    }

    .iconfont {
      font-size: 2rem;
      margin-right: 0.375rem;
    }

    .fa {
      position: absolute;
      top: 0;
      right: 0.875rem;
      font-size: 1.5rem;
      color: #ccc;
      line-height: 2.875rem;
    }
  }

  li:last-child {
    border: none;
  }

  .assess-item {
    padding: 10px 0;
    align-items: flex-start;

    .icon-dingdanjine {
      line-height: 28px;
    }
  }

  .love-gift-queue {
    margin-left: 1rem;
    color: #e31919;
    line-height: 1;
    text-align: left;
    display: flex;
    align-items: center;

    span {
      margin-right: 0.5rem;
    }
  }

  .love-gift-queue-line {
    display: flex;
    flex-direction: column;
    line-height: normal;
    text-align: left;
    align-items: flex-start;
  }
}

.list_box_b {
  margin: 0.625rem 16px 0;
}
</style>